import React, { Component } from 'react';
import { Swiper } from 'zent';
import "./Model1.css";
import 'zent/css/index.css';
class Model extends Component {
  constructor(props){
    super(props);
    this.state={
      stores:[],
      gedan:[]
    }
  }
  Tsingsong(e){
    let m = e.currentTarget.dataset.id
    localStorage.setItem("kind1",m)
    this.props.history.push("/singsong")

  }
  render() {
    return (
      <div>
      {/* 轮播图外红色框架 */}
       <div className="S-swiper">
         {/* 轮播图 */}
        <Swiper
          className="swiper-demo-simple"
          dotsColor="red"
          dotsSize="small"
          autoplay
          onChange={this.handleChange}
        >
          {
            this.state.stores.map((item, index) => {
              return <div className="swiper-demo-simple-h" key={index}><img src={item.imageUrl} alt="" /></div>;
            })
          }
        </Swiper>
       </div>
       <div className="tuisong">
         推荐歌单
       </div>
       <div className="G-body1">
          {
            this.state.gedan.map((item,index)=>{
              return <div className="G-body" onClick={this.Tsingsong.bind(this)} data-id={item.id} key={index} >
                <div ><img src={item.picUrl} alt="" className="G-img" /></div>
                <div>{item.name}</div>
              </div>
            })
          }
       </div>
      </div>
    );
  }
  componentDidMount(){
    this.$axios([
      {
        url:"http://localhost:9115/banner"
      },
      {
        url:"http://localhost:9115/personalized"
      }
    ]).then(res=>{
      console.log(res[1].result);
      this.setState({
        stores:res[0].banners,
        gedan:res[1].result
      });
    }).catch(err=>console.log(err));
  }
}

export default Model;